import React, {Component} from 'react'
import { connect } from 'react-redux'
import { getUserInfo } from '$actions/userInfo'

class UserInfo extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.getUserInfo();
        console.log(this.props, 558899);
    }

    renderList(list) {
        let lis;

        if(list){
            lis = list.map((v,i) => 
                <div key={v.id}>{v.name} + {v.age}</div>
            )
        }

        return lis
    }

    render() {
        let {list}  = this.props.userInfo.userInfo;

        return (
            <div id='userInfo'>
                <div>I am userInfo page</div>
                {this.renderList(list)}
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        userInfo: state.userInfo
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        getUserInfo: () => {
            dispatch(getUserInfo())
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(UserInfo)